<template>
  <el-dialog
      v-model="editProductVisible"
      title="审核信息"
      width="30%"
      center
      @close="closeEditDialog(false)"
  >
    <el-form ref="validateForm" :model="reservationForm" :rules="houseRules" label-width="120px" class="demo-dynamic" status-icon>
      <el-form-item label="预约名称" prop="reservation_name">
        <el-input v-model="reservationForm.reservation_name" placeholder="Enter house_name...">

        </el-input>
      </el-form-item>
      <el-form-item label="预约资源" prop="resource_id">
        <el-input v-model="reservationForm.resource_id" placeholder="Enter address...">

        </el-input>
      </el-form-item>
      <el-form-item label="资源类型 " prop="resource_type">
        <el-input v-model="reservationForm.resource_type" placeholder="Enter family_id...">

        </el-input>
      </el-form-item>
      <el-form-item label="用户 " prop="user_id">
        <el-input v-model="reservationForm.user_id" placeholder="Enter family_id...">

        </el-input>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-input v-model="reservationForm.state" placeholder="Enter family_id...">

        </el-input>
      </el-form-item>
      <el-form-item label="审核信息" prop="check_msg">
        <el-input v-model="reservationForm.check_msg" placeholder="Enter family_id...">

        </el-input>
      </el-form-item>
      <el-form-item label="描述 " prop="describe">
        <el-input v-model="reservationForm.describe" placeholder="Enter region_id...">

        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="() => {
          closeEditDialog(false);
        }">取消</el-button>
        <el-button type="primary" @click="submitEdit"
        >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script >
import {reactive, toRefs, ref, onMounted} from "vue";
import axios from "axios";
import {ElMessageBox} from "element-plus";
//根据房屋编号，查询要编辑的数据
function houseLoadEditData(state){
  axios.get("/api/reservation?ID="+state.reservationID).then((res) => {
    state.reservationForm = res.data.data.res
    console.log(res.data.data.res);
    state.reservationForm.state = 1
  })
}
//提交编辑
function houseEdit(state, validateForm, emit){
  const submitEdit = () => {
    validateForm.value.validate((vaild) => {
      if(vaild){
        const params={
          ID:state.reservationID,
          reservation_name:state.reservationForm.reservation_name,
          user_id:parseInt(state.reservationForm.user_id),
          resource_id:state.resource_id,
          status:parseInt(state.reservationForm.state),
          describe:state.reservationForm.describe,
          check_msg:state.reservationForm.check_msg,
          resource_type:parseInt(state.reservationForm.resource_type)
        };
        axios.put("/api/reservation", (params)).then((res) => {
          emit('onCloseDialog', false, res);
        })
      }
    })
  }
  return {submitEdit}
}
export default {
  name: "AddUser",
  props: {
    editProductVisible:Boolean,
    reservationID:Number,
    resourceID:Number
  },
  emits: ["onCloseDialog"],
  setup(props, {emit}) {
    const validateForm = ref();
    const state=reactive({
      editProductVisible:props.editProductVisible,
      reservationID:props.reservationID,
      resource_id:props.resourceID,
      reservationForm:{
        reservation_name:"",
        user_id:0,
        state:0,
        resource_id:0,
        check_msg:"",
        describe:"",
        resource_type:2
      }
    });
    const houseRules = {
      reservation_name: [{required: true, message: 'Please input work_name', trigger: 'blur',}],
      describe: [{required: true, message: 'Please input describe', trigger: 'blur',}],
      check_msg: [{required: true, message: 'Please input describe', trigger: 'blur',}],
      resource_id: [{required: true, message: 'Please input amount', trigger: 'blur',}],
      user_id: [{required: true, message: 'Please input money', trigger: 'blur',}],
      state: [{required: true, message: 'Please input money', trigger: 'blur',}],
      resource_type: [{required: true, message: 'Please input resource_type_id', trigger: 'blur',}],
    }
    const closeEditDialog = (visible) => {
      emit('onCloseDialog', visible)
    }
    const handleClose = (done) => {
      ElMessageBox.confirm('Are you sure to close this dialog?')
          .then(() => {
            done()
          })
          .catch(() => {
            // catch error
          })
    }
    onMounted(() => {
      houseLoadEditData(state);
    })
    return {
      ...toRefs(state),
      handleClose,
      closeEditDialog,
      houseRules,
      validateForm,
      ...houseEdit(state, validateForm, emit)
    }
  }
}
</script>

<style scoped>

</style>